<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹弹乐</title>
    <style>
        #main{
            width: 500px;
            height: 300px;
            background-color: black;
            margin: 0 auto;
            position:relative;
		    overflow:hidden;
        }
        .ball{
            width: 35px;
            height: 35px;
            position: absolute;
            top: 20px;
            left:50px;
            border-radius: 80px;
            border: 1px solid red;
        }
        #foot{
            width: 80px;
            height: 5px;
            background-color: pink;
            position: absolute;
            bottom: 20px;
            left:50px;
        }
    </style>
    <script>
        var ball = null;
        var foot = null;
        var timer = null;
        var btn = null;
        var x = 10;
        var y = 10;
        var grade = 0;
        var e_grade = null;
        window.onload = function(){
            ball = document.getElementById("ball");
            foot = document.getElementById("foot");
            btn=document.getElementById("startButton");
            e_grade = document.getElementById("grade");
            document.onkeydown=move;
        }
        function move(event){
            if(timer != null){
                var old = parseInt(foot.offsetLeft);
                switch(event.keyCode){
                    case 37:
                        foot.style.left=(old-30<0)?"0px":(old-30+"px");
                        break;
                    case 39:
                        foot.style.left=(old+30>520)?"720px":(old+30+"px");
                        break;
                    default:break;
                }
            }
        }
        function startGame(){
            //开定时器（不断触发down）
            if(btn.value=="开始"){
                btn.value="暂停";
                timer = window.setInterval(down,100);
            }else if(btn.value=="暂停"){
                window.clearInterval(timer);
                timer = null;
                btn.value="开始";
            }
        }
        function down(){
            ball.style.top=ball.offsetTop+y+'px';
            ball.style.left  = ball.offsetLeft+x+'px';
            var old = parseInt(ball.offsetTop);
            if(parseInt(ball.style.top)>275){
                ball.style.top = "20px";
                alert("你凉了,总得分为："+grade);
                window.clearInterval(timer);
                timer = null;
                btn.value="开始";
                grade=0;
                e_grade.innerHTML=grade;
            }else{
                if(parseInt(ball.style.left) >=465 ){
                    x=-10;
                }else if(parseInt(ball.style.left) <=0){
                    x=10;
                }
                var ball_left = parseInt(ball.offsetLeft); 
                var foot_left = parseInt(foot.offsetLeft); 
                if(ball_left<=foot_left){
                    if(Math.abs(ball_left-foot_left)<35&&old==240){
                    y=-10;
                    grade+=1;
                    e_grade.innerHTML=grade;
                    }else if(old<=0){
                    y=10;
                    }
                }else{
                    if(Math.abs(ball_left-foot_left)<80&&old==240){
                    y=-10;
                    grade+=1;
                    e_grade.innerHTML=grade;
                    }else if(old<=0){
                        y=10;
                    }
                }
                
            }
        }
    </script>
</head>
<body>
    <input type="button" value="开始" id="startButton" onclick="startGame()" />
    <div id="main">
        <img id="ball" class="ball" src="ball.jpg" />
        <span id="grade" style="color: red; position:absolute;top:10px;right:20px;">0</span>
        <div id=foot></div>
    </div>
</body>
</html>